<template>
    <div>
      <p>
        为了确保帐号安全，您的邮箱号码将作为该帐号的安全邮箱，其他人不会看到您的邮箱号码。
      </p>
      <div class="regf">
      <el-form ref="Form" :model="Form" :rules="rules" label-width="120px" >
        <el-form-item prop="email">
          <el-input placeholder="请填写邮箱" v-model="Form.email" @blur="sendEmail" style="width: 70%;float: left"></el-input>
          <el-button type="primary" style="display: inline-block;" :disabled="!this.email" @click="sendVerificationCode">发送验证码</el-button>
        </el-form-item>
        <el-form-item prop="valcode">
        <el-input placeholder="请填写验证码" v-model="Form.valcode" @blur="sendCode" ></el-input>
        </el-form-item>
      </el-form>
      </div>
      <button class="btn-next" @click="next">注册</button>
    </div>
</template>

<script>
  import bus from '../../assets/bus'
  export default {
    name: 'steptwo',
    data() {
      return {
        email:0,
          regcode:0,
        Form: {
          email:'',
            valcode:'',
        },
        rules: {
          email:[{ required: true, message: '请填写邮箱地址', trigger: 'blur' }],
          valcode:[{ required: true, message: '请填写邮箱验证码', trigger: 'blur' }]
        },
      }
    },
    methods: {
      sendEmail: function() {
        var regemail = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/

        if (this.Form.email != '' && !regemail.test(this.Form.email)) {//若邮箱输入格式错误，则提示
          this.$message({
            message: '请输入正确的邮箱地址',
            type: 'error'
          })
          // this.Form.email= '';
          this.email=0;
        }else{//若邮箱输入格式正确，则确认
          this.email=1;
        }
      },
      next:function () {
        var _this=this;
          console.log("next");
          if(_this.email==1&&_this.regcode==1){
            //若邮箱和验证码均已验证完毕，则调用验证验证码接口
            _this.$axios.post('/email/verifyEmail',{
                code:this.Form.valcode
            }).then(function (res) {
                if(res.data.code==200){
                    _this.register();
                    console.log(res);
                }
            }).catch(function (err) {
                console.log(err);
            });

        }
      },
      register:function () {
          //若注册成功则前往下一步，且切换到stepthree
          var _this=this;
          var user=_this.$store.state.user.user;
          console.log(user);
          console.log(("lll"));
          _this.$axios.post('/user/register', {
              username:user.username,
              password:user.password,
              checkPassword:user.checkedPassword,
              email:_this.Form.email
          })
              .then(function (response) {
                 if (response.data.code==200){//若注册成功
                     _this.$parent.next();//进度条前进1
                     _this.$router.push("/reg/stepthree");//前往“注册成功”子路由
                 }
                  console.log(response);
              })
              .catch(function (error) {
                  console.log(error);
                  console.log("失败");
              });

      },
        sendCode:function () {
            //验证码正则
            var regecode = /^[0-9a-zA-Z]{4}$/
            if (this.Form.valcode != '' && !regecode.test(this.Form.valcode)) {//若验证码输入格式错误，则提示
                this.$message({
                    message: '请输入正确的验证码',
                    type: 'error'
                })
                this.Form.valcode= '';
                this.regcode=0;
            }else{//若验证码输入格式正确，则发送至接口
                this.regcode=1;
            }
        },
        sendVerificationCode(){
          this.$axios.post('/email/sendVerifyEmail',{
              toEmail:this.Form.email
          }).then(function (res) {
              console.log(res);
          }).catch(function (err) {
              console.log(err);
          });
        }
    },
    mounted(){
      var _this=this;
      this.$emit('change',1);//向父组件的change函数传输1，表示让步骤条前进到第二步
      //接收stepone广播来的用户信息
      bus.$on('ep',(e)=>{
        _this.info=e;
        console.log(_this.info);
      })
    }
  }
</script>

<style scoped>
p{
  display: inline-block;
  background: #f8f8f8;
  height: 50px;
  line-height: 24px;
  font-size: 15px;
  text-align: left;
  padding: 10px 15px;
  margin-top: 10px;
}
.regf{
  margin: 0 auto;
  width: 500px;
  margin-left: -64px;
  margin-top: 50px;
}
.btn-next{
  margin: 0 auto;
  width: 380px;
  margin-top: 20px;
  margin-left: -5px;
  height: 46px;
  background: #2c82ff;
  color: #FFFFFF;
  outline: none;
  border: none;
  cursor: pointer;
  font-weight: bold;
  font-size: 20px;
  font-family: 'Microsoft Yahei', 微软雅黑, Arial, simsun;

}
.btn-next:hover{
  opacity: 0.5;
}
</style>
